<template>
  <div class="box4" ref="map"></div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
//引入中国地图的JSON数据
//@ts-ignore
import chinaJSON from './china.json'
//获取DOM实例
let map = ref()
//先注册中国地图
echarts.registerMap('china', chinaJSON as any)
onMounted(() => {
  let myCharts = echarts.init(map.value)
  myCharts.setOption({
    //地图组件
    geo: {
      map: 'china', //中国地图
      roam: true, //鼠标缩放
      left: 70,
      right: 70,
      top: 40,
      //地图文字的设置
      label: {
        show: true, //文字显示
        color: 'white', //文字颜色
      },
      //每个多边形的样式
      itemStyle: {
        //线性渐变
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: 'rgb(1,52,129)',
            },
            {
              offset: 1,
              color: 'rgb(17,20,78)',
            },
          ],
          global: false,
        },
        opacity: 0.8,
      },
    },
    //航线设置
    series: [
      {
        type: 'lines',
        data: [
          {
            coords: [
              [115.892151, 28.676493], //起点
              [110.33119, 20.031971], //终点
            ],
            //统一样式设置
            lineStyle: {
              color: '#29fcff',
              width: 1,
            },
          },
        ],
        //线条效果
        effect: {
          show: true,
          color: 'rgb(126, 247, 4)',
          symbol:
            'path://M741.003636 930.909091a139.636364 139.636364 0 0 1-66.094545-17.221818L493.614545 814.545455l-126.603636 87.970909a87.04 87.04 0 0 1-137.076364-69.818182l-1.861818-162.909091-98.210909-55.854546a139.636364 139.636364 0 0 1 15.825455-250.181818L808.494545 101.236364a114.967273 114.967273 0 0 1 156.16 123.578181l-86.574545 587.636364a139.636364 139.636364 0 0 1-75.403636 104.029091 139.636364 139.636364 0 0 1-61.672728 14.429091z m-33.047272-78.429091a68.421818 68.421818 0 0 0 101.003636-50.269091l86.574545-587.403636a44.683636 44.683636 0 0 0-16.756363-42.123637 44.218182 44.218182 0 0 0-44.450909-6.516363L171.52 428.683636A69.818182 69.818182 0 0 0 162.909091 552.727273l116.363636 64a34.676364 34.676364 0 0 1 17.92 30.254545l2.094546 183.854546a16.523636 16.523636 0 0 0 9.541818 15.36 17.221818 17.221818 0 0 0 17.92 0L471.738182 744.727273a35.374545 35.374545 0 0 1 36.770909-1.861818z',
          symbolSize: 10,
          trailLength: 0.01,
        },
        lineStyle: {
          type: 'dashed',
          curveness: 0.3,
        },
      },
      {
        type: 'lines',
        data: [
          {
            coords: [
              [101.778916, 36.623178], //起点
              [117.283042, 31.86119], //终点
            ],
            //统一样式设置
            lineStyle: {
              color: '#29fcff',
              width: 1,
            },
          },
        ],
        //线条效果
        effect: {
          show: true,
          color: 'rgb(126, 247, 4)',
          symbol:
            'path://M741.003636 930.909091a139.636364 139.636364 0 0 1-66.094545-17.221818L493.614545 814.545455l-126.603636 87.970909a87.04 87.04 0 0 1-137.076364-69.818182l-1.861818-162.909091-98.210909-55.854546a139.636364 139.636364 0 0 1 15.825455-250.181818L808.494545 101.236364a114.967273 114.967273 0 0 1 156.16 123.578181l-86.574545 587.636364a139.636364 139.636364 0 0 1-75.403636 104.029091 139.636364 139.636364 0 0 1-61.672728 14.429091z m-33.047272-78.429091a68.421818 68.421818 0 0 0 101.003636-50.269091l86.574545-587.403636a44.683636 44.683636 0 0 0-16.756363-42.123637 44.218182 44.218182 0 0 0-44.450909-6.516363L171.52 428.683636A69.818182 69.818182 0 0 0 162.909091 552.727273l116.363636 64a34.676364 34.676364 0 0 1 17.92 30.254545l2.094546 183.854546a16.523636 16.523636 0 0 0 9.541818 15.36 17.221818 17.221818 0 0 0 17.92 0L471.738182 744.727273a35.374545 35.374545 0 0 1 36.770909-1.861818z',
          symbolSize: 10,
          trailLength: 0.01,
        },
        lineStyle: {
          type: 'dashed',
          curveness: -0.3,
        },
      },
      {
        type: 'lines',
        data: [
          {
            coords: [
              [121.472644, 31.231706], //起点
              [121.509062, 25.044332], //终点
            ],
            //统一样式设置
            lineStyle: {
              color: '#29fcff',
              width: 1,
            },
          },
        ],
        //线条效果
        effect: {
          show: true,
          color: 'rgb(126, 247, 4)',
          symbol:
            'path://M741.003636 930.909091a139.636364 139.636364 0 0 1-66.094545-17.221818L493.614545 814.545455l-126.603636 87.970909a87.04 87.04 0 0 1-137.076364-69.818182l-1.861818-162.909091-98.210909-55.854546a139.636364 139.636364 0 0 1 15.825455-250.181818L808.494545 101.236364a114.967273 114.967273 0 0 1 156.16 123.578181l-86.574545 587.636364a139.636364 139.636364 0 0 1-75.403636 104.029091 139.636364 139.636364 0 0 1-61.672728 14.429091z m-33.047272-78.429091a68.421818 68.421818 0 0 0 101.003636-50.269091l86.574545-587.403636a44.683636 44.683636 0 0 0-16.756363-42.123637 44.218182 44.218182 0 0 0-44.450909-6.516363L171.52 428.683636A69.818182 69.818182 0 0 0 162.909091 552.727273l116.363636 64a34.676364 34.676364 0 0 1 17.92 30.254545l2.094546 183.854546a16.523636 16.523636 0 0 0 9.541818 15.36 17.221818 17.221818 0 0 0 17.92 0L471.738182 744.727273a35.374545 35.374545 0 0 1 36.770909-1.861818z',
          symbolSize: 10,
          trailLength: 0.01,
        },
        lineStyle: {
          type: 'dashed',
          curveness: 0.3,
        },
      },
      {
        type: 'lines',
        data: [
          {
            coords: [
              [111.670801, 40.818311], //起点
              [117.190182, 39.125596], //终点
            ],
            //统一样式设置
            lineStyle: {
              color: '#29fcff',
              width: 1,
            },
          },
        ],
        //线条效果
        effect: {
          show: true,
          color: 'rgb(126, 247, 4)',
          symbol:
            'path://M741.003636 930.909091a139.636364 139.636364 0 0 1-66.094545-17.221818L493.614545 814.545455l-126.603636 87.970909a87.04 87.04 0 0 1-137.076364-69.818182l-1.861818-162.909091-98.210909-55.854546a139.636364 139.636364 0 0 1 15.825455-250.181818L808.494545 101.236364a114.967273 114.967273 0 0 1 156.16 123.578181l-86.574545 587.636364a139.636364 139.636364 0 0 1-75.403636 104.029091 139.636364 139.636364 0 0 1-61.672728 14.429091z m-33.047272-78.429091a68.421818 68.421818 0 0 0 101.003636-50.269091l86.574545-587.403636a44.683636 44.683636 0 0 0-16.756363-42.123637 44.218182 44.218182 0 0 0-44.450909-6.516363L171.52 428.683636A69.818182 69.818182 0 0 0 162.909091 552.727273l116.363636 64a34.676364 34.676364 0 0 1 17.92 30.254545l2.094546 183.854546a16.523636 16.523636 0 0 0 9.541818 15.36 17.221818 17.221818 0 0 0 17.92 0L471.738182 744.727273a35.374545 35.374545 0 0 1 36.770909-1.861818z',
          symbolSize: 10,
          trailLength: 0.01,
        },
        lineStyle: {
          type: 'dashed',
          curveness: -0.3,
        },
      },
      {
        type: 'lines',
        data: [
          {
            coords: [
              [116.405285, 39.904989], //起点
              [113.665412, 34.757975], //终点
            ],
            //统一样式设置
            lineStyle: {
              color: '#29fcff',
              width: 1,
            },
          },
        ],
        //线条效果
        effect: {
          show: true,
          color: 'rgb(126, 247, 4)',
          symbol:
            'path://M741.003636 930.909091a139.636364 139.636364 0 0 1-66.094545-17.221818L493.614545 814.545455l-126.603636 87.970909a87.04 87.04 0 0 1-137.076364-69.818182l-1.861818-162.909091-98.210909-55.854546a139.636364 139.636364 0 0 1 15.825455-250.181818L808.494545 101.236364a114.967273 114.967273 0 0 1 156.16 123.578181l-86.574545 587.636364a139.636364 139.636364 0 0 1-75.403636 104.029091 139.636364 139.636364 0 0 1-61.672728 14.429091z m-33.047272-78.429091a68.421818 68.421818 0 0 0 101.003636-50.269091l86.574545-587.403636a44.683636 44.683636 0 0 0-16.756363-42.123637 44.218182 44.218182 0 0 0-44.450909-6.516363L171.52 428.683636A69.818182 69.818182 0 0 0 162.909091 552.727273l116.363636 64a34.676364 34.676364 0 0 1 17.92 30.254545l2.094546 183.854546a16.523636 16.523636 0 0 0 9.541818 15.36 17.221818 17.221818 0 0 0 17.92 0L471.738182 744.727273a35.374545 35.374545 0 0 1 36.770909-1.861818z',
          symbolSize: 10,
          trailLength: 0.01,
        },
        lineStyle: {
          type: 'dashed',
          curveness: 0.3,
        },
      },
      {
        type: 'lines',
        data: [
          {
            coords: [
              [106.504962, 29.533155], //起点
              [87.617733, 43.792818], //终点
            ],
            //统一样式设置
            lineStyle: {
              color: '#29fcff',
              width: 1,
            },
          },
        ],
        //线条效果
        effect: {
          show: true,
          color: 'rgb(126, 247, 4)',
          symbol:
            'path://M741.003636 930.909091a139.636364 139.636364 0 0 1-66.094545-17.221818L493.614545 814.545455l-126.603636 87.970909a87.04 87.04 0 0 1-137.076364-69.818182l-1.861818-162.909091-98.210909-55.854546a139.636364 139.636364 0 0 1 15.825455-250.181818L808.494545 101.236364a114.967273 114.967273 0 0 1 156.16 123.578181l-86.574545 587.636364a139.636364 139.636364 0 0 1-75.403636 104.029091 139.636364 139.636364 0 0 1-61.672728 14.429091z m-33.047272-78.429091a68.421818 68.421818 0 0 0 101.003636-50.269091l86.574545-587.403636a44.683636 44.683636 0 0 0-16.756363-42.123637 44.218182 44.218182 0 0 0-44.450909-6.516363L171.52 428.683636A69.818182 69.818182 0 0 0 162.909091 552.727273l116.363636 64a34.676364 34.676364 0 0 1 17.92 30.254545l2.094546 183.854546a16.523636 16.523636 0 0 0 9.541818 15.36 17.221818 17.221818 0 0 0 17.92 0L471.738182 744.727273a35.374545 35.374545 0 0 1 36.770909-1.861818z',
          symbolSize: 10,
          trailLength: 0.01,
        },
        lineStyle: {
          type: 'dashed',
          curveness: 0.3,
        },
      },
    ],
  })
})
</script>

<style scoped lang="scss">
.box {
  .charts {
    width: 100%;
    height: 100%;
  }
}
</style>
